<template>
  <view class="hb-header-wrap">
    <view class="hb-header-flex" :style="{background: flexBgColor}">
      <view class="uni-status-bar"></view>
      <view class="hb-header">
        <view class="left" v-if="showLeft" @click="onNavigateBack">
          <slot name="left">
            <view class="uni-page-head-btn"><i class="uni-btn-icon" style="color: rgb(0, 0, 0); font-size: 27px;"
            		@click="back"></i></view>
          </slot>
        </view>
        <view class="title">
          <slot name="title">
            <text>{{title}}</text>
          </slot>
        </view>
        <view class="right">
          <slot name="right">
            <text v-if="rightText" @click="onNavigateTo">{{rightText}}</text>
          </slot>
        </view>
      </view>
    </view>
    <view v-if="placeholder" :style="{background: flexBgColor}">
      <view class="uni-status-bar"></view>
      <view class="header-placeholder"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: "hb-header",
  props: {
    title: {
      default: '',
      type: String
    },
    placeholder: {
      default: true,
      type: Boolean
    },
    defaultBack: { // 默认返回上一步
      default: true,
      type: Boolean
    },
     showLeft: {
      default: true,
      type: Boolean
    },
    back: {
      default: true,
      type: Boolean
    },
    flexBgColor: {
      default: '#5A8DF9',
      type: String
    },
    rightText: {
      default: '',
      type: String
    },
    url: {
      default: '',
      type: String
    },
    scrollTop: {
      default: 0,
      type: Number
    },
  },
  data() {
    return {
      flexTab: false,
    }
  },
  watch: {
    scrollTop(newData) {
      if (newData > 80) {
        if (this.flexTab == false) {
          this.flexTab = true
        }
      } else {
        if (this.flexTab = true) {
          this.flexTab = false
        }
      }
    }
  },
  methods: {
    onNavigateTo() {
      // navigate页面跳转
      if (this.url) {
        uni.navigateTo({
          url: this.url
        });
      }
    },
    onNavigateBack() {
      // 关闭当前页
      if (this.defaultBack) {
        uni.navigateBack({
          delta: 1
        });
      } else {
        this.$emit('back');
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .hb-header-wrap {
    display: block;
    box-sizing: border-box;
  }
  .header-placeholder {
    height: 44px;
  }
  .hb-header-flex {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }
  .uni-status-bar {
    width: 100%;
    height: var(--status-bar-height);
  }
  .hb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 7px 3px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    overflow: hidden;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    box-sizing: border-box;
    color: #fff;
    -webkit-transition-property: all;
    transition-property: all;
    .title {
      flex: 1;
      text-align: center;
      color: $hb-text-black-color;
      font-size:32rpx;
      // font-weight: bold;
    }
    .left {
      min-width: 120rpx;
      .icon {
        display: block;
        width: 46rpx;
        height: 46rpx;
      }
    }
    .right {
      display: flex;
      justify-content: flex-end;
      min-width: 120rpx;
      color: #fff;
      font-size: 28rpx;
    }
  }
</style>
